<template>
  <div class="progress-manage-container" v-loading="loading">
    <div class="group-button">
      <!-- //1天 2月 3季度 4年 -->
      <div :class="statisType == '1' && 'active'" @click="checkStatisType('1')">
        日
      </div>
      <div :class="statisType == '2' && 'active'" @click="checkStatisType('2')">
        月
      </div>
      <div :class="statisType == '3' && 'active'" @click="checkStatisType('3')">
        季度
      </div>
      <div :class="statisType == '4' && 'active'" @click="checkStatisType('4')">
        年
      </div>
    </div>
    <div class="left-warp">
      <div class="line-chart" ref="drawerLineChart" v-if="chartShow"></div>
    </div>
    <div class="right-warp">
      <div class="title">当{{ checkText }}进度</div>
      <div class="ring"></div>
      <div
        class="footer flex"
        :class="dataSource.currentToPreRadio < 0 && 'error'"
      >
        <div>上{{ checkText }}同比：</div>
        <div class="value">
          {{ currentMonthRadio(dataSource.currentToPreRadio) }} %
        </div>
        <div class="arrow"></div>
      </div>
      <div class="chart-dom">
        <div
          class="line-chart"
          ref="drawerlLiquidFillChart"
          v-if="chartShow"
        ></div>
        <div class="value">{{ dataSource.currentMonthRadio || 0 }}%</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginData } from "@/tools";
import { progressStatistics } from "@/api/wisdom-beam/home";
export default {
  data() {
    return {
      chartLine: null,
      dataSource: {},
      loading: false,
      chartLiquidFill: null,
      statisType: "2",
      chartShow: true,
    };
  },
  computed: {
    checkText() {
      let { statisType } = this;
      switch (statisType) {
        case "1":
          return "日";
        case "2":
          return "月";
        case "3":
          return "季度";
        case "4":
          return "年";
        default:
          return "日";
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    checkStatisType(statisType = "2") {
      this.statisType = statisType;
      this.chartShow = false;
      this.getData();
    },
    currentMonthRadio(val) {
      if (Number(val) > 0) {
        return "+" + val;
      } else {
        return val;
      }
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        let { tenantCode } = getLoginData();
        progressStatistics({ tenantCode, queryType: this.statisType })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.dataSource = source;
            resolve();
          })
          .catch((_) => {
            this.dataSource = {};
            reject();
          })
          .finally((_) => {
            this.chartShow = true;
            this.loading = false;
            this.$nextTick(() => {
              this.drawerLineChart();
              this.drawerlLiquidFillChart();
            });
          });
      });
    },
    //折线图
    drawerLineChart() {
      let { dataSource } = this;
      let chart_dom = this.$refs["drawerLineChart"];
      this.chartLine = this.$echarts.init(chart_dom);
      let option = {
        color: ["#FFA801", "#3CA5EF"],
        legend: {
          top: 50,
          right: 20,
          itemWidth: 16,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 87,
          left: 60,
          bottom: 60,
          right: 20,
        },
        xAxis: {
          data: dataSource?.xData ?? [],
          axisLabel: {
            rotate: 20,
            color: "#666666",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: "单位：个",
          nameTextStyle: {
            fontSize: 14,
            color: "#666666",
            padding: [0, 0, 4, -30],
          },
          axisLabel: {
            color: "#666666",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "计划进度",
            type: "line",
            smooth: false,
            symbolSize: 6,
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: dataSource?.allCountData ?? [],
          },
          {
            name: "实际进度",
            type: "line",
            smooth: false,
            symbolSize: 6,
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: dataSource?.completeCountData ?? [],
          },
        ],
      };
      this.chartLine.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    //水滴图
    drawerlLiquidFillChart() {
      let value = (this.dataSource?.currentMonthRadio ?? 0) / 100;
      let chart_dom = this.$refs["drawerlLiquidFillChart"];
      this.chartLiquidFill = this.$echarts.init(chart_dom);
      let option = {
        series: [
          {
            type: "liquidFill",
            radius: "53%",
            center: ["50.2%", "56%"],
            color: [
              "#12A6B7",
              new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#078FF7",
                },
                {
                  offset: 1,
                  color: "#2BDAFF",
                },
              ]),
            ],
            data: [value, value], // data个数代表波浪数
            amplitude: 6,
            // 图形样式
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
            },
            backgroundStyle: {
              borderWidth: 0,
              color: "none",
            },
            label: {
              show: false,
            },
            outline: {
              show: false,
            },
          },
        ],
      };
      this.chartLiquidFill.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        this.chartLiquidFill.resize();
      });
    },
  },
  destroyed() {
    this.chartLine && this.chartLine.dispose();
    this.chartLiquidFill && this.chartLiquidFill.dispose();
  },
};
</script>

<style lang="less" scoped>
.progress-manage-container {
  height: 100%;
  width: 100%;
  .flex();
  .group-button {
    z-index: 9;
    position: absolute;
    top: 20px;
    left: 120px;
    .flex();
    font-size: 14px;
    color: #666666;
    height: 24px;
    border: 1px solid #00a2ff;
    border-radius: 12px;
    overflow: hidden;
    font-family: "宋体";
    div {
      cursor: pointer;
      height: 100%;
      padding: 0 10px;
      .flex();
      align-items: center;
      &:not(:last-child) {
        border-right: 1px solid #00a2ff;
      }
      &.active {
        background: #00a2ff;
        color: #fff;
      }
    }
  }

  .left-warp {
    flex-shrink: 0;
    width: 600px;
    height: 100%;
    position: relative;
    .line-chart {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
  .right-warp {
    flex-shrink: 0;
    flex: 1;
    position: relative;
    .chart-dom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .line-chart {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .value {
        font-size: 30px;
        color: #333333;
        font-weight: 400;
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        top: 150px;
      }
    }

    .title {
      font-size: 18px;
      color: #333333;
      text-align: center;
      padding-top: 60px;
    }
    .ring {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 142px;
      height: 142px;
      background: url("https://jszhgd.cn/static/pc/beamyard/liquid_fill_bg.png");
      background-size: 100% 100%;
    }
    .footer {
      font-size: 14px;
      align-items: center;
      justify-content: center;
      color: #666666;
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 20px;
      .value {
        color: #09c87e;
      }
      .arrow {
        width: 11px;
        height: 6px;
        margin-left: 8px;
        background: url("https://jszhgd.cn/static/pc/beamyard/down.png");
        background-size: 100% 100%;
        transform: rotate(180deg);
      }
      &.error {
        .value {
          color: #e93d34;
        }
        .arrow {
          background: url("https://jszhgd.cn/static/pc/beamyard/up.png");
          background-size: 100% 100%;
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
